<template>
  <view class="searchLayout">
    <view class="search">
      <uni-search-bar @confirm="onSearch" @cancel="onClear" @clear="onClear" focus placeholder="搜索"
        v-model="queryParams.keyword">
      </uni-search-bar>
    </view>


    <view v-show="!classList.length">
      <view class="history" v-show="!!historySearch.length">
        <view class="topTitle">
          <view class="text">最近搜索</view>
          <view class="icon" @click="removeHistory">
            <uni-icons type="trash" size="25"></uni-icons>
          </view>
        </view>
        <view class="tabs">
          <view class="tab" v-for="tab in historySearch" :key="tab" @click="clickTab(tab)">{{ tab }}</view>
        </view>
      </view>

      <view class="recommend">
        <view class="topTitle">
          <view class="text">热门搜索</view>
        </view>
        <view class="tabs">
          <view class="tab" v-for="tab in recommendList" :key="tab" @click="clickTab(tab)">{{ tab }}</view>
        </view>
      </view>
    </view>


    <view class="noSearch" v-show="noSearch">
      <uv-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png"></uv-empty>
    </view>


    <view>
      <view class="list">
        <navigator :url="`/pages/preview/preview?id=${item._id}`" class="item" v-for="item in classList"
          :key="item._id">
          <image :src="item.smallPicurl" mode="aspectFill"></image>
        </navigator>
      </view>
      <view v-if="!noSearch && (classList.length || noData)"><uni-load-more :status="noData ? 'noMore' : 'loading'" />
      </view>
      <view class="safe-area-inset-bottom"></view>
    </view>


  </view>
</template>

<script setup lang="ts">
import { ref,watch } from "vue";
import {
  onLoad,
  onUnload,
  onReachBottom
} from "@dcloudio/uni-app";
import { apiSearchWall } from "@/api/search";
import type { ClassifyWallList } from '@/api/classify';
import { useClassifyListStore } from "@/stores/classifyList";
const store = useClassifyListStore()
const { setList } = store
const HISTORY_SEARCH = 'historySearch'

//查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 12,
  keyword: ""
})

//搜索历史词
const historySearch = ref<string[]>(uni.getStorageSync(HISTORY_SEARCH) || []);

//热门搜索词
const recommendList = ref(["美女", "帅哥", "宠物", "卡通"]);

//没有更多
const noData = ref(false);
const loading = ref(false);
//没有搜索结果
const noSearch = ref(false);

//搜索结果列表
const classList = ref<ClassifyWallList[]>([]);

const querySearch = async () => {
  initQueryParams(queryParams.value.keyword)
  queryParams.value.pageNum++
  loading.value = true
  await uni.showLoading({
    mask: true
  })

  const res = await apiSearchWall(queryParams.value, {
    complete() { uni.hideLoading() }
  })
  loading.value = false

  classList.value = [...classList.value, ...res.data]
  noData.value = res.data.length < queryParams.value.pageSize
  noSearch.value = classList.value.length === 0
  setList(classList.value)
}

//点击搜索
const onSearch = () => {
  if (!queryParams.value.keyword) {
    return uni.showToast({
      title: '搜索内容不能为空',
      icon: "none"
    })
  }
  historySearch.value = [...new Set([queryParams.value.keyword, ...historySearch.value])].slice(0, 10)
  uni.setStorageSync(HISTORY_SEARCH, historySearch.value)
  queryParams.value.pageNum = 1
  classList.value = []
  querySearch()
}

const initQueryParams = (value = '') => {
  noSearch.value = false
  noData.value = false
  queryParams.value.keyword = value
  queryParams.value.pageNum = 1
}

//点击清除按钮
const onClear = () => {
  if (loading.value) {
    return
  }
  initQueryParams()
  classList.value = []
}



//点击标签进行搜索
const clickTab = (value) => {
  if (loading.value) {
    return
  }
  initQueryParams(value)
  classList.value = []
  onSearch()
}


//点击清空搜索记录
const removeHistory = () => {
  uni.showModal({
    title: "是否清空历史搜索？",
    success: res => {
      if (res.confirm) {
        uni.removeStorageSync(HISTORY_SEARCH)
        historySearch.value = []
      }
    }
  })
}

//触底加载更多
onReachBottom(() => {
  if (!queryParams.value.keyword) {
    return
  }
  querySearch()
})

//关闭有页面
onUnload(() => {
  setList([])
})
</script>

<style lang="scss" scoped>
.searchLayout {
  .search {
    padding: 0 10rpx;
  }

  .topTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    color: #999;
  }

  .history {
    padding: 30rpx;
  }

  .recommend {
    padding: 30rpx;
  }

  .tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 20rpx;

    .tab {
      background: #F4F4F4;
      font-size: 28rpx;
      color: #333;
      padding: 10rpx 28rpx;
      border-radius: 50rpx;
      margin-right: 20rpx;
      margin-top: 20rpx;
    }
  }

  .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rpx;
    padding: 20rpx 5rpx;

    .item {
      height: 440rpx;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
